<template>
  <layout-page :ifBaike="true">
    <template v-slot:menu>
      <el-menu
        :default-active="groupList[0]"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item
          v-for="(item, index) in groupList"
          :key="index"
          :index="item"
          @click="chaneGroup(item)"
        >
          <!-- <span>{{ item }}</span> -->
          {{ item }}
        </el-menu-item>
      </el-menu>
    </template>
    <template v-slot:main>
      <div style="display: flex; align-items: center">
        <strong class="analyse-head">植物栽培</strong>
        <div class="Search">
          <el-input
            placeholder="请输入关键词"
            v-model="input"
            style="display: inline-block; width: 400px; margin-right: 20px"
          ></el-input>
          <el-button type="primary" class="btnSearch">搜索</el-button>
        </div>
      </div>
      <div class="cardPart">
        <el-card class="card">
          <el-scrollbar height="100%;">
            <div v-for="(item, index) in list" :key="item.id">
              <h2>{{ index + 1 }}.{{ item.name }}</h2>
              <p>{{ item.classification }}</p>
              <p>{{ item.profile }}</p>
              <p>{{ item.skill }}</p>
            </div>
          </el-scrollbar>
        </el-card>
      </div>
    </template>
  </layout-page>
</template>
<script>

import { getGroup } from "@/api/index";
import LayoutPage from '../components/layoutPage.vue'
export default {
  name: "Search",
  components: { LayoutPage },
  data () {
    return {
      list: [],
      groupList: ["多肉植物", "栽培花卉"],
      chooseGroup: '多肉植物',
    };
  },
  created () {
    this.getGroup();
  },
  methods: {
    getGroup () {
      getGroup({
        group: this.chooseGroup,
      })
        .then((res) => {
          console.log(res);
          this.list = res;


        })
        .catch(() => {
          this.$message.error('资源获取错误！');
        });
    },
    chaneGroup (i) {
      console.log("i", i)
      this.chooseGroup = i;
      this.getGroup();
    },


  },
};
</script>

<style lang="scss" scoped>
.el-menu-item.is-active {
  color: #fff;
  background-color: #95d475;
}

.cardPart {
  width: 100%;
  height: 90%;
  margin-top: 20px;
}
.card {
  height: 100%;
  width: 60%;
  margin-left: 20%;
  overflow-y: auto;
}
.el-card {
  border-top: 6px solid #95d475;
  box-shadow: 0;
}
.analyse-head {
  border-left: 4px #56ab2f solid;
  padding-left: 10px;
  display: inline-block;
}
.searchPart {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Search {
  display: flex;
  justify-content: center;
  flex: 1;
}
.btnSearch {
  display: inline-block;
}
</style>